<template>
    <div>
       <header>
            <a href="javascript:history.back(-1)"><img class="back" src="@/assets/imgs/icon_back.png" alt=""></a>
            <span>榜单</span>
     </header>

     <div class="banner">
         <img src="@/assets/imgs/banner111.jpg" alt="">
     </div>
     <section class="detailContent">
         <ul>
             <li v-for='(item,index) of list' :key="index">
                 <span>{{index+1}}</span>
                 <div class="userInfoTwo">
                     <h3>{{item.songName}}</h3>
                     <p>{{item.singerName.toString()}}</p>
                     <img src="@/assets/imgs/play.png" alt="" class='play'>
                     <img src="@/assets/imgs/more.png" alt="" class='more'>
                 </div>
             </li>
         </ul>
     </section>
    </div>
</template>

<script>
export default {
    data(){
        return{
          list:[]
        }
    },
    mounted() {
        // console.log(this.$http)
        // this.$http.get('/mock/test').then(res=>{
        //     // console.log(res)
        //     this.list=res
        // }).catch(e=>{
        //     console.log(e)
        // })
    },
    
}
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    height: 1rem;
    position: relative;
    line-height: 1rem;
    color: #333;
    background: #fff;
    font-size: .38rem;
    text-align: center;
    overflow: hidden;
    .back {
        position: absolute;
        left: .1rem;
        top: 50%;
        width: .24rem;
        margin: -.15rem 0 .1rem .3rem;
    }
}
.banner{
    width: 100%;
    height: 3.36rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.detailContent{
    width: 100%;
    ul{
        li{
            width: 100%;
            height: 1.32rem;
            overflow: hidden;
            span{
                color: #E81A60;
                font-size: .36rem;
                width: 0.68rem;
                height: 0.48rem;
                display:block;
                text-align: center;
                line-height: .48rem;
                margin:.42rem 0;
                float: left;
            }
            .userInfoTwo{
                display:block;
                width: 6.8rem;
                height: 100%;
                border-bottom: 1px solid #999;
                padding: .2rem 0;
                float: left;
                position: relative;
                // vertical-align: middle;
               h3{
                   font-weight: normal;
                   width: 4.5rem;
                   color: #030303;
                   font-size: .32rem;
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;
               }
               p{
                  width: 4.5rem;
                  color: #999;
                  margin-top: .1rem;
                  font-size: .28rem;
                  white-space: nowrap;
                   overflow: hidden;
                   text-overflow: ellipsis;
               }
               .play{
                       position: absolute;
                       right: 1rem;
                       top: 30%;
                       width: .5rem;
               }
               .more{
                   position: absolute;
                   right: 0;
                   top: 5%;
                   width: .84rem;
                   padding: .4rem;
                   cursor: pointer;
   
               }
            }
         
        }
    }
}
</style>
